<template>
  <div class="app-container">
    <div class="head-title">
      <span>驱动名称：{{this.driveName}}</span>
      <span>插件库名称：{{this.adapterName}}</span>
    </div>

    <u-page-config
      :filter-array="filterArray"
      v-model="filter"
      :actionBtn="actionBtn"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      :show-filter="false"
      showSelection
      @handleSelectionChange="handleSelectionChange"
      @addRow="handleAdd"
      @removeRow="removeRow"
      @editRow="handleEdit"
    />
    <fill-form-dialog
      v-if="editDialogVisible"
      v-model="editDialogVisible"
      :origin-form="form"
      :mode="mode"
      :adapterName="adapterName"
      :get-list="getList"
    />

  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import FillFormDialog from './components/fillFormDialog'
import table from "@/mixin/uTable";
import {listSdk,deleteSdk} from "@/api/device/adapterManagement";
export default {
  name: "AdapterManagement",
  mixins: [table],
  components:{UPageConfig, FillFormDialog},
  data() {
    return {
      filterArray: [
        // {label: "设备ID", key: "deviceId", type: "input"},
      ],
      tableColumn: [
        {label: "插件库名称", prop: "adapterName"},
        {label: "插件库版本", prop: "adapterVersion"},
        {label: "适应中间件版本", prop: "middlewareVersion"},
        {
          label: "操作", type: "btn", attr: {width: 140}, btnArr: [
            {icon: "el-icon-edit-outline", text: "修改", emit: "editRow"},
            {icon: "el-icon-delete", text: "删除", emit: "removeRow"},
          ]
        }
      ],
      actionBtn: [
        {type: 'primary', text: '新增', icon: 'el-icon-plus', emit: 'addRow',permissions: ''},
        {
          type: 'danger', text: '删除', icon: 'el-icon-delete', emit: 'removeRow',
          disabledRule: () => this.ids.length === 0
        },
      ],
      tableData: [],
      editDialogVisible: false,
      mode: 'add',
      form: {},
      adapterName: '',
      driveName: ''
    }
  },

  methods: {
    // 删除
    removeRow(row) {
      const id = row ? row.id : this.ids;
      this.removeTip(async () => {
        await deleteSdk(id)
      }, row ? '该项数据' : '已勾选项数据')
    },
    handleAdd(){
      this.mode = 'add';
      this.editDialogVisible = true;
    },
    handleEdit(row){
      this.mode = 'update';
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogVisible = true;
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },
    handleSelectDevice(row){
      this.dialogVisible = false
      // 关闭设备列表弹窗
      this.$emit('select', row)
    },
    getList() {
      this.getInit(listSdk, {
        adapterName: this.$route.query.adapterName
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    const {adapterName,driveName } = to.query;

    next((vm)=>{
      vm.adapterName = adapterName;
      vm.driveName = driveName;
      if(!adapterName){
        vm.$alert('插件库名称不能为空！', '提示', {
          confirmButtonText: '确定',
          callback(){
            vm.$router.push({
              name: 'Drive'
            });
          }
        });
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  .head-title {
    margin-bottom: 15px;

    span {
      display: inline-block;
      margin: 0 40px 0 0;
      line-height: 30px;

      &:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
